<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>候选人列表</span>
      </div>
      <el-form :inline="true" :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.realName"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="realName" label="应聘者姓名"></el-table-column>
        <el-table-column prop="identityNum" label="身份证号码"></el-table-column>
        <el-table-column  label="性别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sex==1">男</el-tag>
            <el-tag v-else>女</el-tag>
          </template>

        </el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="birthday" label="出生日期"></el-table-column>
        <el-table-column prop="jobName" label="面试岗位"></el-table-column>
      </el-table>


      <div class="pagination">

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

    </el-card>
  </div>
</template>

<script>

import axios from "axios";
export default {
  data() {
    return {
      form: {
        realName: '',
        mobile: '',
        pageSize:10,
        pageNum:1
      },
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    // 页面加载时获取数据
    this.fetchData();
  },
  methods: {
    search() {
      // 这里可以添加搜索逻辑，例如发送请求获取数据
      // 假设这里有一个名为fetchData的方法来获取数据
      this.fetchData();
    },
    handleSizeChange(size) {
      this.form.pageSize = size;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.form.pageNum = page;
      this.fetchData();
    },
    fetchData() {
      // 这里可以发送Axios请求获取数据，根据form中的条件和分页信息
      // 假设返回的数据结构是{data: [...], total: 100}
      // 这里先模拟一个空数据的情况
      axios.post('http://localhost:8781/candidate/list', this.form).then(res=>{
        console.log(res)
        this.tableData = res.data.data.records;
        console.log(res.data.total)
        this.total = res.data.data.total;

})


    }
  }
};
</script>

<style scoped>
.pagination {
  text-align: right;
}
</style>